<template>
	<view class="thingsPage">
		<view class="pageHeader">
			<view class="headContent">
				<view class="headContentBack1"></view>
				<view class="backBtn" @click="backNext">
					⋘
				</view>
				<view class="headContentBack2"></view>
				<p>记住每一事</p>
			</view>
		</view>
		<view class="thingsCenter">
			<view class="thingTime">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="chooseTime"/>
			</view>
			<view class="thingTitle">
				<view class="contentTitle">
					<view class="beginIcon"></view>事件标题
				</view>
				<view class="titleContent">
					<textarea v-model="title" maxlength="10" placeholder="请输入事件标题(10字内)" style="width: 100%;height: 100%;font-size: 28rpx;letter-spacing: 2rpx;"/>
				</view>
			</view>
			<view class="thingContent">
				<view class="contentTitle">
					<view class="beginIcon"></view>详情描述
				</view>
				<view class="detailContent">
					<textarea v-model="detail" maxlength="200" placeholder="请输入具体描述(0-200)" style="width: 100%;height: 100%;font-size: 28rpx;letter-spacing: 2rpx;"/>
				</view>
			</view>
			<view class="btn">
				<view class="btn1" @click="reset">重置</view>
				<view class="btn2" @click="saveData">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseTime: '', //记事时间
				title: '', //标题
				detail: '', //详情
			}
		},
		mounted() {
			this.upTime()
		},
		methods: {
			saveData(){
				let title = this.title.replace(/\s*/g,"")
				let detail = this.detail.replace(/\s*/g,"")
				if(!title){
					uni.showToast({
						title: '请输入标题内容',
						icon: 'none',
						duration: 1500
					})
					return
				}
				let key = 0
				let value = uni.getStorageSync('thingsJosn');
				if (value) {
					let thingsJosn = JSON.parse(value)
					Object.keys(thingsJosn).sort().forEach(function(item){
					    key = item
					})
					key = Number(key) + 1
					let obj = {id:key,time:this.chooseTime,title:title,detail:detail}
					thingsJosn[key] = obj
					uni.setStorageSync('thingsJosn', JSON.stringify(thingsJosn));
				}else{
					let obj = {id:key,time:this.chooseTime,title:title,detail:detail}
					let objJson = {0:obj}
					uni.setStorageSync('thingsJosn', JSON.stringify(objJson));
				}
				uni.showToast({
					title: '保存成功,可前往中心查看',
					icon: 'none',
					duration: 1500
				})
				this.reset()
			},
			reset(){
				this.upTime()
				this.title = ''
				this.detail = ''
			},
			upTime(){
				let timeElapsed = Date.now();
				let today = new Date(timeElapsed);
				today = today.toISOString()
				this.chooseTime = today.substr(0,10)
			},
			backNext(){
				uni.navigateBack({
					delta: 1,
				});
			}
		}
	};
</script>

<style>
	::-webkit-scrollbar {
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	}
	
	.thingsPage{
		width: 100%;
		height: 100vh;
		background-color: rgba(250, 250, 250,0.8);
	}
	
	.pageHeader{
		width: 100%;
		height: 11vh;
		position: relative;
		background:linear-gradient(to right ,rgba(234, 85, 20, 0.9),rgba(234, 85, 20, 0.4));
		overflow: hidden;
	}
	
	.pageHeader .headContent{
		width: 100%;
		height: 6vh;
		margin-top: 5vh;
		position: absolute;
		text-align: center;
		font-size: 34rpx;
		line-height: 7vh;
		letter-spacing: 1rpx;
		font-weight: 500;
		color: rgba(238, 234, 220, 1.0);
	}
	
	.pageHeader .headContent > p{
		position: absolute;
		z-index: 20;
		width: 100%;
		text-align: center;
	}
	
	.pageHeader .headContent .backBtn{
		height: 60rpx;
		line-height: 60rpx;
		position: absolute;
		z-index: 30;
		margin-top: 1vh;
		left: 20rpx;
		font-size: 60rpx;
		font-weight: 400;
		color: rgba(190, 246, 255, 1.0);
	}
	
	.pageHeader .headContent .headContentBack1{
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: -7.5vh;
		left: -35rpx;
		background-color: rgba(234, 85, 20, 0.3);
	}
	
	.pageHeader .headContent .headContentBack2{
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		z-index: 10;
		border-radius: 100%;
		top: 1vh;
		left: 20%;
		background-color: rgba(234, 85, 20, 0.5);
	}
	
	.thingsCenter{
		position: absolute;
		width: 750rpx;
		margin-top: 20rpx;
	}
	
	.thingTime{
		position: relative;
		width: 710rpx;
		margin: 20rpx;
		/* height: 100rpx; */
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(234, 85, 20, 0.3);
		background: rgba(255, 255, 255, 1);
		overflow: hidden;
	}
	
	.thingTitle{
		position: relative;
		width: 710rpx;
		margin: 16rpx 20rpx;
		height: 200rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(234, 85, 20, 0.3);
		background: rgba(255, 255, 255, 1);
		padding: 10rpx;
	}
	
	.thingContent{
		position: relative;
		width: 710rpx;
		margin: 16rpx 20rpx;
		height: 400rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
		border: 2rpx solid rgba(234, 85, 20, 0.3);
		background: rgba(255, 255, 255, 1);
		padding: 10rpx;
	}
	
	.btn{
		width: 710rpx;
		margin: 50rpx 20rpx;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.btn1{
		width: 350rpx;
		height: 90rpx;
		border-radius: 10rpx;
		box-shadow: 0px 4px 7px rgba(234, 85, 20, 0.3);
		color: rgba(234, 85, 20, 0.7);
		font-size: 38rpx;
		text-align: center;
		letter-spacing: 16rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		border:2rpx solid rgba(234, 85, 20, 0.7);
	}
	
	.btn2{
		width: 350rpx;
		height: 90rpx;
		border-radius: 10rpx;
		box-shadow: 0px 4px 7px rgba(234, 85, 20, 0.3);
		color: #ffffff;
		font-size: 38rpx;
		text-align: center;
		letter-spacing: 16rpx;
		line-height: 90rpx;
		box-sizing: border-box;
		background-color: rgba(234, 85, 20, 0.7);
	}
	
	.contentTitle{
		width: 690rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: rgba(120, 120, 120, 1);
	}
	
	.contentTitle .beginIcon{
		width: 6rpx;
		height: 28rpx;
		margin-right: 10rpx;
		border-radius: 8rpx;
		background-color: rgba(234, 85, 20, 0.9);
	}
	
	.titleContent{
		width: 690rpx;
		height: 130rpx;
		margin-top: 10rpx;
	}
	
	.detailContent{
		width: 690rpx;
		height: 330rpx;
		margin-top: 10rpx;
	}
</style>
